<template>
	<div>
		<home-model v-if="clickedTabs.includes('home')" v-show="activeTabbar === 0" />
		<mine-model v-if="clickedTabs.includes('mine')" v-show="activeTabbar === 1" />
		<!-- 底部tabbar -->
		<van-tabbar
			v-model="activeTabbar"
			@change="tabbarChange"
			active-color="#FFB402"
			inactive-color="#999999"
		>
			<van-tabbar-item>
				<span>首页</span>
				<div
					:class="props.active ? 'home_active' : 'home_inactive'"
					slot="icon"
					slot-scope="props"
					class="tabbar-icon_common"
				></div>
			</van-tabbar-item>
			<van-tabbar-item>
				<span>设置</span>
				<div
					:class="props.active ? 'mine_active' : 'mine_inactive'"
					slot="icon"
					slot-scope="props"
					class="tabbar-icon_common"
				></div>
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	import { Tabbar, TabbarItem } from 'vant';
	import HomeModel from './HomeModel.vue';
	import MineModel from './MineModel.vue';

	export default {
		name: 'MainPage',

		components: {
			[Tabbar.name]: Tabbar,
			[TabbarItem.name]: TabbarItem,
			HomeModel,
			MineModel
		},

		data () {
			return {
				activeTabbar: 0,
				clickedTabs: [],
				// "approveList"
				tabbarRoute: ['home', 'mine']
			};
		},

		created () {

			this.clickedTabs.push('home');
		},

		mounted () {

		},

		methods: {
			tabbarChange (index) {
				const theTab = this.tabbarRoute[index];
				if (!this.clickedTabs.includes(theTab)) {
					this.clickedTabs.push(theTab);
				}
			}
		}
	};
</script>
<style lang='less' scoped>
	.tabbar-icon_common {
		width: 28px;
		height: 28px;
		background-image: url("../../images/css_sprites.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	// 首页icon的定位
	.home_active {
		background-position: -84px 0;
	}

	.home_inactive {
		background-position: -28px 0;
	}

	// 单据icon的定位
	.bill_active {
		background-position: -112px 0;
	}

	.bill_inactive {
		background-position: -140px 0;
	}

	// 我的icon的定位
	.mine_active {
		background-position: -56px 0;
	}

	.mine_inactive {
		background-position: 0 0;
	}
</style>
